<li [class.el-submenu]="true" [class.is-active]="active" [class.is-opened]="opened" (mouseenter)="mouseenterHandle()"
    (mouseleave)="mouseleaveHandle()">
    <div class="el-submenu__title" (click)="clickHandle()"
        [ngStyle]="{ paddingLeft: '20px;', color: rootMenu.textColor || '', borderBottomColor: borderColor() }"
        #subTitle (mouseenter)="subTitle.style.backgroundColor = rootMenu.hoverBackgroundColor()"
        (mouseleave)="subTitle.style.backgroundColor = ''">
        <ng-container *ngIf="!titleTmp"> {{title}} </ng-container>
        <ng-container *ngIf="titleTmp">
            <ng-template [ngTemplateOutlet]="titleTmp"></ng-template>
        </ng-container> <i class="el-submenu__icon-arrow" [class.el-icon-caret-bottom]="rootMenu.mode === 'horizontal'"
            [class.el-icon-arrow-down]="rootMenu.mode === 'vertical'"></i>
    </div>
    <ul class="el-menu" [@dropAnimation]="opened" [ngStyle]="{ backgroundColor: rootMenu.backgroundColor || '' }">
        <ng-content></ng-content>
    </ul>
</li>